<template>
  <el-form label-width="100px" :model="addAlipayForm" :rules="addAlipayRules" ref="addAlipayRef">
    <el-row>
      <el-col :span="10">
        <el-form-item label="渠道号" prop="ChannelNo">
          <el-input v-model="addAlipayForm.ChannelNo" placeholder="请输入渠道号"></el-input>
        </el-form-item>
        <el-form-item label="交易时间" prop="TradeTime">
          <el-date-picker v-model="addAlipayForm.TradeTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单号" prop="Number">
          <el-input v-model="addAlipayForm.Number" placeholder="请输入支付宝订单号"></el-input>
        </el-form-item>
        <el-form-item label="交易金额" prop="Money">
          <el-input v-model.number="addAlipayForm.Money" placeholder="请输入交易金额，单位为分"></el-input>
        </el-form-item>
        <el-form-item label="买家名称" prop="Name">
          <el-input v-model="addAlipayForm.Name" placeholder="请输入买家名称"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="Remark">
          <el-input v-model="addAlipayForm.Remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="submitBtn">确认添加</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { addAlipayOrder } from 'network/fill'
export default {
  data() {
    return {
      //Form表单数据
      addAlipayForm: {
        ChannelNo: '',
        Number: '',
        TradeTime: '',
        Name: '',
        Money: '',
        Remark: ''
      },
      //表单验证对象
      addAlipayRules: {
        ChannelNo: [
          { required: true, message: '请输入渠道号', trigger: 'blur' }
        ],
        Number: [
          { required: true, message: '请输入支付宝订单号', trigger: 'blur' }
        ],
        TradeTime: [
          {
            type: 'date',
            required: true,
            message: '请输入支付时间',
            trigger: 'blur'
          }
        ],
        Money: [
          {
            type: 'number',
            required: true,
            message: '请输入支付金额',
            trigger: 'blur'
          }
        ],
        Name: [{ required: true, message: '请输入收款人姓名', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //提交按钮
    submitBtn() {
      this.$refs.addAlipayRef.validate(async valid => {
        if (!valid) return
        const res = await addAlipayOrder(this.addAlipayForm)
        //添加成功处理
        if (res.status == 'y') {
          this.$message.success('添加成功')
          this.$emit('addAlipayOrderSuccess', res.data)
          this.$refs.addAlipayRef.resetFields()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-button {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>